<template>
    <el-select
        v-model="value"
        :multiple='!comData.dataUrl.isRadio'
        filterable
        remote
        :placeholder="placeholder"
        :remote-method="remoteMethod"
        :loading="loading"
        @change="getValue"
        clearable
        @focus='getFocus'>
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    import request from '@/utils/request'
    export default {
        data(){
            return{
                options: [],
                value: [],
                loading: false,
                obj:{},
                fieldValue:[]
            }
        },
        props:{
            placeholder:{
                type:String,
                default:''
            },
            label:[String,Number],
            comData: {
                type: Object,
                default: () => {}
            }
        },
        mounted() {
            const {i_key,name} = this.comData
            this.obj[i_key] = []
            this.obj.key = i_key
            this.obj.chineseName = name
        },
        methods: {
            getUrl(data) {
                return request({
                    url: this.comData.dataUrl.url,
                    method: this.comData.dataUrl.method || 'post',
                    data
                })
            },
            getDataList(data) {
                this.getUrl(data).then(res => {
                    this.loading = false;
                    if(res.code == 200) {
                        this.options = res.data.map(item => {
                            return {
                                value: item[this.comData.dataUrl.value],
                                label: this.obj.key == 'processIds' ? item.code + '-' + item.name : item.name,
                            }
                        })
                        if(this.fieldValue.length) { //编辑
                            this.value = this.fieldValue.map(i => i.value)
                            this.getValue()
                        }
                    }
                })
            },
            getFocus() {
                if(this.value.length == 0) this.remoteMethod('')
            },
            remoteMethod(query) {
                this.loading = true;
                this.getDataList({name: query})
            },
            getValue(){
                let val
                const {i_key} = this.comData
                val = this.options.filter(i => this.value.indexOf(i.value) != -1)
                this.obj[i_key] = val
            },
            editValue(fieldValue){
                this.fieldValue = fieldValue
                this.getDataList({name:''})
            }
        },
    }
</script>